<script setup lang="ts">
interface Props {
  name?: string
  icon?: string
  isFavorite?: boolean
  useCount?: number
  lastUsed?: string
}

const props = defineProps<Props>()
const emit = defineEmits(['click', 'favorite'])

const handleFavoriteClick = (event) => {
  event.stopPropagation()
  emit('favorite')
}
</script>

<template>
  <div class="result-item" @click="$emit('click')">
    <a-layout>
      <a-layout-header>
        <div class="icon-container">
          <img :src="icon" :alt="name" class="app-icon"/>
          <button 
            class="favorite-button" 
            @click="handleFavoriteClick"
            :class="{ 'is-favorite': isFavorite }"
          >
            <i :class="isFavorite ? 'i-carbon-star-filled' : 'i-carbon-star'"></i>
          </button>
        </div>
      </a-layout-header>
      <a-layout-footer>
        <div class="app-name" :title="name">{{ name }}</div>
        <div v-if="useCount" class="app-meta">
          使用次数: {{ useCount }}
        </div>
        <div v-if="lastUsed" class="app-meta">
          上次使用: {{ new Date(lastUsed).toLocaleString() }}
        </div>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped>
.result-item {
  display: inline-block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-align: center;
  width: 80px;
  height: 90px;
  background-color: rgba(255, 255, 255, 0.8);
  position: relative;
}

.result-item:hover {
  background-color: rgba(245, 245, 245, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.icon-container {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto;
}

.app-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
}

.favorite-button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.result-item:hover .favorite-button {
  opacity: 1;
}

.favorite-button.is-favorite {
  opacity: 1;
  color: #f5a623;
}

.app-name {
  font-size: 12px;
  color: #333;
  text-align: center;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 8px;
}

.app-meta {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}
</style>